<template>
  <render v-bind="props"></render>
</template>
<script setup lang="ts" name="line">
import { ref, reactive, h, computed } from 'vue'
import { ParagraphItem } from '../util'
type PROPS = { data: ParagraphItem }
const props = withDefaults(defineProps<PROPS>(), {})
const height = computed(() => {
  return props.data?.line?.pic?.height || 16
})
const render = (props: PROPS) => {
  const { data } = props
  return h('p', { class: 'opus-para-line' }, [
    h('img', {
      alt: 'cut-off',
      src: data.line?.pic.url,
      style: { maxHeight: height.value + 'px' },
    }),
  ])
}
</script>
<style lang="scss" scoped></style>
